<template>
	<view style="display: flex; flex-direction: column; align-items: center;width: 750rpx;">
		<u-sticky bgColor="#fff" style="width: 750rpx;">
			<view class="tabContainer">
				<u-tabs :list="listUtabs" active-color="#16a5fe" inactive-color="#606266"
					:itemStyle="{width:'175rpx',height: '80rpx'}" :lineHeight="'6rpx'" :lineWidth="'60rpx'"
					:current="currentUtabs" @change="onChangeUtabs">
				</u-tabs>		
			</view> 

		</u-sticky>	
		
		<view
			v-for="(item, index) in articleObj.list"
			class="articleContainer"
			:key="index"
			@click="gotoArticleDetail(item.id)"
		>
			<view class="left">
				<view class="title text-2line-ellipsis">
					{{ item.title }}
				</view>
				<view class="bottom">
					<text :class="{ pass: item.reviewStatus != 0 }"
						>{{ item.pageViews || "0" }}次阅读</text
					>

					<text style="margin-left: 30rpx; margin-right: 30rpx">{{
						item.createTime
					}}</text>
					<view v-if="item.reviewStatus == 0" class="checking"> 审核中 </view>
					<view style="width: 120rpx; display: flex;align-items: center;" v-else>
						<image
							@click.stop="onArticleQrcodeShow(item)"
							style="width: 52rpx; height: 52rpx; box-sizing: content-box"
							src="../static/image/article_qrcode.png"
							mode=""
						>
						</image>
						<view class="shareBtn" @click.stop="onShare({
							id:item.id,
							sharePath: '/pages/client/article/articleDetail?id=' + item.id,
							title: item.title,
							imageUrl: item.cover,
						})">
							<image
								class="icon"
								src="../static/image/icon_sharebtn.png"
								mode=""
							></image>
						</view>
						
					</view>
				</view>
			</view>
			<image class="right" :src="item.cover" mode="scaleToFill"></image>
			<image
				@click.stop="onArticleDelete(item)"
				v-if="currentUtabs == 0"
				class="tag"
				src="../static/image/ds_icon_del.png"
				mode=""
			></image>
		</view>
		<view class="" style="height: 200rpx"> </view>
		<view class="bottomContainer" v-if="currentUtabs == 0">
			<button
				style="border: none"
				plain="true"
				type="default"
				@click="onPopupOpen"
			>
				<view class="container">
					<image
						class="icon"
						src="../static/image/icon_import.png"
						mode=""
					></image>
					转载文章
				</view>
			</button>
		</view>


		<u-popup
			:show="showBottomPopup"
			mode="center"
			@close="showBottomPopup = false"
			round="40"
			:closeable="false"
		>
			<view class="popupContainer">
				<u-icon size="36rpx" name="close" @click="showBottomPopup=false" class="popupCloseIconTopRight">
					
				</u-icon>

				<input
					class="input"
					:focus="true"
					type="text"
					v-model="articleUrl"
					placeholder="微信公众号文章地址"
				/>
				<view class="btn" @click="onImportArticle"> 转载 </view>
			</view>
		</u-popup>
		<popupQrcode v-model="showQrCode" :qrCodeObj="qrCodeObj"> </popupQrcode>
	</view>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";

let that = null;
const api = require("@/static/js/api.js");
const utils = require("@/static/js/utils.js");
import popupQrcode from "../components/popupQrCode/index.vue";
export default {
	components: { popupQrcode },
	computed: {
		...mapState({
			hasLogin: (state) => state.userInfo.hasLogin,
			isAuthUserInfo: (state) => state.userInfo.isAuthUserInfo,
			isAuthPhone: (state) => state.userInfo.isAuthPhone,
			isSeller: (state) => state.userInfo.isSeller,
			avatarUrl: (state) => state.userInfo.avatarUrl,
			nickName: (state) => state.userInfo.nickName,
			telephone: (state) => state.userInfo.telephone,
			openId: (state) => state.userInfo.openId,
			employeeId: (state) => state.userInfo.employeeId,
		}),
	},

	data() {
		return {
			//===顶部tab==========================================
			listUtabs: [
				{
					name: "我的文章",
				},
				{
					name: "企业文章",
				},
			],
			currentUtabs: 0,
			//===顶部tab end======================================

			articleType: 1,
			showBottomPopup: false,
			currentarticleId: "",

			keyword: "",
			articleSearchTitle: "",
			articleObj: {
				list: [],
				loadStatus: "loading",
				pageIndex: 1,
				curPageIndex: 0,
			},
			showQrCode: false,
			qrCodeObj: {},
			articleUrl: "",
		};
	},

	onLoad(options) {
		that = this;
	},
	onShow() {
		that.clearListShow(that.articleObj);
		that.getArticleList();
	},

	onReachBottom() {
		that.getArticleList();
	},

	methods: {
		onArticleQrcodeShow(item) {
			let qrCodeUrl = "";
			uni.showLoading({
				title: "加载中..."
			})
			api.getArticleQrcode({ id: item.id }).then((res) => {
				qrCodeUrl = res.data;
				this.showQrcode(qrCodeUrl);
			}).finally(t=>{
				uni.hideLoading()
			})
		},
		showQrcode(qrCodeUrl) {
			that.qrCodeObj.qrCode = qrCodeUrl;
			that.qrCodeObj.title = "";
			that.qrCodeObj.content = "文章分享";
			that.qrCodeObj.introduce = "";
			that.showQrCode = true;
		},

		onTitleChange(e) {
			if (e.length == 0) {
				that.articleSearchTitle = "";
				that.clearListShow(that.articleObj);
				that.getArticleList();
			}
		},
		onTitleClear() {
			that.articleSearchTitle = "";
			that.clearListShow(that.articleObj);
			that.getArticleList();
		},
		onTitleSearch(e) {
			console.log("onTitleSearch:", that.articleSearchTitle);
			that.articleSearchTitle = e;
			that.clearListShow(that.articleObj);
			that.getArticleList();
		},

		onChangeUtabs(item) {
			var index = item.index;
			if (this.currentUtabs != index) {
				this.currentUtabs = index;
				that.clearListShow(that.articleObj);
				that.getArticleList();
			}
		},

		onPopupOpen(e) {
			that.showBottomPopup = true;
		},
		onPopupClose() {
			that.showBottomPopup = false;
		},

		onArticleDelete(item) {
			uni.showModal({
				title: "提示",
				content: "确定要删除该文章吗？",
				success: function (res) {
					if (res.confirm) {
						console.log("用户点击确定");
						that.deleteArticle(item);
					} else if (res.cancel) {
						console.log("用户点击取消");
					}
				},
			});
		},

		gotoArticleDetail(id) {
			uni.navigateTo({
				url: "./articleDetail?id=" + id,
			});
		},


		onImportArticle() {
			uni.showLoading({
				title: "导入中...",
			});
			api
				.importFromMpArticle({
					param: {
						mpUrl: encodeURIComponent(that.articleUrl),
					},
				})
				.then((res) => {
					console.log(res);
					uni.hideLoading();
					if (res.success) {
						that.articleUrl = "";
						that.clearListShow(that.articleObj);
						that.getArticleList();
						that.onPopupClose();
					} else {
						uni.showToast({
							title: "导入失败...",
							icon: "none",
						});
					}
				})
				.catch((res) => {
					uni.hideLoading();
				});
		},
		getArticleList() {
			if (that.articleObj.curPageIndex != that.articleObj.pageIndex) {
				that.articleObj.curPageIndex = that.articleObj.pageIndex;
				api
					.getArticleList({
						interfaceName: that.currentUtabs == 0 ? "my" : "enterprise",
						param: {
							limit: 10,
							page: that.articleObj.pageIndex,
							title: that.articleSearchTitle,
						},
					})
					.then((res) => {
						console.log(res);
						if (res.code == 0) {
							that.pushListShow(that.articleObj, res.data);
						}
					});
			}
		},
		deleteArticle(item) {
			api
				.deleteArticle({
					interfaceName: item.id,
					param: {},
				})
				.then((res) => {
					console.log(res);
					if (res.success) {
						that.clearListShow(that.articleObj);
						that.getArticleList();
					}
				});
		},

		/**
		 * @description: 列表中添加数据
		 * @param {number} id   u-tabs-swiper的当前ID
		 * @param {list}  列表
		 * @return void
		 */
		pushListShow(srcObj, pushlist) {
			if (pushlist && pushlist.length > 0) {
				for (let i = 0; i < pushlist.length; i++) {
					pushlist[i].createTime = utils.formatTime(
						pushlist[i].createTime,
						"yyyy-MM-dd"
					);
					srcObj.list.push(pushlist[i]);
				}
				srcObj.pageIndex++;

				if (pushlist.length == 10) {
					srcObj.loadStatus = "loadmore";
				} else {
					srcObj.loadStatus = "nomore";
				}
			} else {
				srcObj.loadStatus = "nomore";
			}
		},

		//----清空列表
		clearListShow(srcObj) {
			srcObj.curPageIndex = 0;
			srcObj.pageIndex = 1;
			srcObj.list.splice(0, srcObj.list.length);
		},
	},
};
</script>

<style>
page {
	background-color: #f3f3f3;
}
</style>
<style lang="scss">
.tabContainer {
	width: 750rpx;
	background-color: #ffffff;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 120rpx;
	border-bottom: 1px #f3f3f3 solid;
}

.articleType {
	width: 453rpx;
	height: 68rpx;
	border-radius: 15rpx;
	// border: solid 2rpx #349dee;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 30rpx;
	line-height: 68rpx;
	margin-left: 178rpx;

	.wrapper {
		width: 227rpx;
		height: 68rpx;
		overflow: hidden;
		line-height: 68rpx;
		text-align: center;
	}

	.enableLeft {
		border-radius: 15rpx 0rpx 0rpx 15rpx;
		background-color: #349dee;
		color: #ffffff;
	}

	.disableLeft {
		// background-color: #FFFFFF;
		color: #349dee;
	}

	.enableRight {
		border-radius: 0rpx 15rpx 15rpx 0rpx;
		background-color: #349dee;
		color: #ffffff;
	}

	.disableRight {
		// background-color: #FFFFFF;
		color: #349dee;
	}
}

.articleContainer {
	width: 714rpx;
	height: 213rpx;
	background: #ffffff;
	box-shadow: 2rpx 2rpx 2rpx 1rpx #ffffff;
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30rpx;
	margin-top: 30rpx;
	position: relative;
	.tag {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		top: -10rpx;
		right: -10rpx;
		box-shadow: 2rpx 2rpx 2rpx 1rpx #ffffff;
	}
	.left {
		width: 454rpx;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.title {
			width: 420rpx;
			font-size: 30rpx;
			color: #515151;
			line-height: 42rpx;
		}
		.bottom {
			width: 100%;
			font-size: 24rpx;
			color: #999999;
			line-height: 33rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.shareBtn {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 72rpx;
				height: 62rpx;
				// margin-right: 34rpx;
				.icon {
					width: 36rpx;
					height: 36rpx;
				}
				
			}
			.pass {
				color: #666666;
			}
			.checking {
				width: 88rpx;
				height: 40rpx;
				font-size: 24rpx;
				color: #999999;
				line-height: 40rpx;
				text-align: center;
				background: #f4f4f4;
				border-radius: 8px;
			}
		}
	}
	.right {
		width: 184rpx;
		height: 132rpx;
		border-radius: 20rpx;
	}
}

.addArticle {
	position: fixed;
	right: 30rpx;
	bottom: 124rpx;
	width: 108rpx;
	height: 108rpx;
}

.pageEnd {
	height: 22rpx;
	display: flex;
	align-items: center;
	font-size: 24rpx;
	color: #b5b5b5;
	margin-top: 160rpx;
	margin-bottom: 80rpx;

	.line {
		width: 118rpx;
		height: 1px;
		background-color: #cccccc;
		margin-left: 10rpx;
		margin-right: 10rpx;
	}
}

.popupContainer {
	width: 600rpx;
	// height: 364rpx;
	background: #ffffff;
	border-radius: 20rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding-bottom: 70rpx;
	padding-top: 60rpx;
	position: relative;
	.input {
		box-sizing: border-box;
		width: 500rpx;
		height: 92rpx;
		border-radius: 46rpx;
		border: 1rpx solid #979797;
		padding: 0 40rpx;
	}
	.btn {
		width: 458rpx;
		height: 92rpx;
		background: #5e9ffd;
		border-radius: 46rpx;
		margin-top: 48rpx;
		font-size: 30rpx;
		color: #ffffff;
		text-align: center;
		line-height: 92rpx;
	}
}

.bottomContainer {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 750rpx;
	height: 122rpx;
	background: #ffffff;
	display: flex;
	justify-content: center;
	align-items: center;
	border-top: #f3f3f3 1px solid;

	.container {
		width: 600rpx;
		height: 74rpx;
		background: #5e9ffd;
		border-radius: 37rpx;
		font-size: 28rpx;
		color: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;
		.icon {
			width: 40rpx;
			height: 40rpx;
			margin-right: 15rpx;
		}
	}
}
</style>
